import React, { Component } from 'react'

/* 
类组件状态，响应式数据
 
*/

export default class Statecom extends Component {
    state = {
        n: 10,
        m: 100,
        obj: { name: 'xxx', age: 18 },
        list: [
            { id: 1, title: '草莓', price: 10, sed: false },
            { id: 2, title: '西瓜', price: 1.5, sed: true },
        ],
        title: '' //获取到输入框的值
    }

    //类组件定义方法 //添加
    add = () => {
        //添加数据
        let obj = {
            id: new Date().getTime(),
            title: this.state.title,
            price: 10,
            sed: false
        }
        //不允许直接修改原数组(不能 直接使用数组变异的方法)
        /*    let newlist = {...this.state.list} //浅拷贝数据
           newlist.push(obj)
           this.setState({list:newlist}) */
        this.setState({ list: [...this.state.list, obj], title: '' })

    }
    //删除
    del = (id) => {
        //filter遍历数据 过滤出符合条件的新数组 不修改原数据
        let newlist = this.state.list.filter(item => {
            return item.id !== id
        })
        this.setState({ list: newlist })
    }
    //修改sed属性 payload = id
    changeSed = (id) => {
        let newlist = [...this.state.list]
        newlist.forEach(item => {
            if (item.id == id) {
                item.sed = !item.sed
            }
        })
        this.setState({ list: newlist })
    }

    render() {
        /* console.log(this); */
        //es6对象解构
        let { obj, n, list, title } = this.state
        return (
            <div>
                <h2>类组件的状态</h2>
                <p>{n}--{this.state.m}</p>
                <button onClick={() => {
                    //修改状态的方法 2个参数:{部分新状态},回调函数
                    //不允许直接修改原状态
                    //setstate异步执行
                    this.setState({ 'n': n + 1, m: this.state.m + 10 }, () => {
                        //等状态修改完 render重新执行后 在执行 获取到最新的状态值
                        console.log(this.state);
                    })
                }}>修改n和m</button>
                <p>姓名:{this.state.obj.name},年龄:{this.state.obj.age}</p>
                <p>姓名:{obj.name},年龄:{obj.age}</p>
                <button onClick={() => {
                    //对象类型的状态
                    /*     let newobj = { ...obj } //浅拷贝
                        newobj.age += 1
                        this.setState({ obj: newobj }) */
                    this.setState({ obj: { ...obj, age: obj.age + 1 } })
                }}>xxx过生日</button>
                <div>
                    {/* 受控组件:表单的属性和状态进行绑定 当表单onChange的时候获取到输入的值 */}
                    <input value={title} onChange={(e) => {
                        this.setState({ title: e.target.value })
                    }} />
                    <button onClick={this.add}>添加商品</button>
                    {
                        list.map((item => {
                            return <div key={item.id}>
                                <span>名称:{item.title}</span>
                                <span>价格:{item.price}</span>
                                <button onClick={() => { this.del(item.id) }}>删除</button>
                                <button onClick={()=>{this.changeSed(item.id)}}>{item.sed ? '上架' : '下架'}</button>
                            </div>
                        }))
                    }
                </div>
            </div>
        )
    }
}
